<template>
    <view >
			<swiper class="swiper" circular :indicator-dots="swipperConfig.indicatorDots" :autoplay="swipperConfig.autoPlay" :interval="swipperConfig.interval"
						:duration="swipperConfig.duration">
				<swiper-item v-for="item of bannerList" >
					<!--  @error="imageError" -->
					  <image  class="banner" :mode="imageConfig.mode"  style="height: 100%;" :src="item.cover"></image>
				</swiper-item>
			</swiper>
			
			
			<view class="menu">
				<view class="menu-item" v-for="item of  menuList" @click="navTo(item)">
					 <image :src="'/static/images/index/'+item.icon" class="icon" :mode="imageConfig.mode"></image>
					 <view class="">
					 	{{item.name}}
					 </view>
				</view>
			</view>
			<view class="divider">
				
			</view>
			
			<div class="pay">
				
				<view class="pay-info">
					<view class="left">
						<view class="pay-info-name">
								{{payInfo.year}}年度工会互助金
						</view>
					<view class="pay-info-status" >
						{{payInfo.payStatus?'已缴费':'待缴费'}}	
					</view>
						 
					</view>
					<div class="right">
						<button size="default" type="default" class="button"
							style="color:#ffffff;backgroundColor:#C70707;borderColor:#1AAD19; width: 90%;" @click="navToPay"
							hover-class="is-hover">	{{payInfo.payStatus?'缴费详情':'去缴费'}}</button>
					</div>
				</view>
				<view class="info">
					忠诚党的事业  竭诚服务职工
				</view>
			</div>
			<view class="divider">
				
			</view>
	</view>
</template>
<script lang="ts" setup>
import biznewcontentapi from '@/api/biz/biz-newcontent-api.js'
import { ref } from 'vue';

	const bannerList = ref([])
	const  swipperConfig =  ref({
		autoPlay:true,
		indicatorDots:true,
		interval: 2000,
		duration: 500
	})
	
	const imageConfig = ref({
		mode:'scaleToFill'
	})
	
	const  menuList = ref([{
		icon:'menu1.png',
		type:'tab',
		name:'新闻公告',
			route:'/pages/biz/news/index',
	},{
		icon:'menu2.png',
		type:'tab',
		name:'文件资料',
				route:'/pages/biz/file/index',
	},{
		icon:'menu4.png',
		type:'page',
		name:'会费缴纳',
		route:'/pages/biz/pay/index',
	},{
		icon:'menu3.png',
		type:'page',
		route:'/pages/biz/advice/form',
		name:'交流互动'
	}])
	
	const payInfo= ref({
		year:2024,
		payStatus:true
	})
	
	const navToPay =()=>{
		if(!payInfo.value.payStatus){
			uni.navigateTo({
				url:'/pages/biz/pay/index'
			});
		}else{
			uni.navigateTo({
				url: '/pages/biz/pay/history'
			})	
		}
	}
	// 获取banner
	const getBannerContent =()=>{
		biznewcontentapi.newContentBanner().then(res=>{
			bannerList.value =res
		})
	}
	// 跳转到对应模块
	const navTo = (item)=>{
		if(item.type =='tab'){
			uni.switchTab({
				url:item.route
			});
		}else{
			uni.navigateTo({
				url: item.route
			})	
		}
		
	}
	// 获取会费缴纳信息
	const getPayInfo=()=>{
	
	}
	
	getBannerContent()

	
</script>

<style scoped lang="scss">	
	.menu{
		display: flex;
		margin-top: 20rpx;
		justify-content: space-evenly;
		flex-direction: row;
		.menu-item{
			width: 150rpx;
			text-align: center;
			.icon{
				width: 100rpx;
				height: 90rpx;
			}
			.name{
				font-size: 40rpx;
				font-weight: bolder;
				color: #000 100%;
			}
		}
	}
	.divider{
		width: 90%;
		margin: 0 auto;
		padding-top: 20rpx;
	    padding-bottom: 20rpx;
		border-bottom: 1pt solid rgba(187,187,187,1);
	
	}
	
	.banner{
		width: 100%;
		height: 350rpx;
		background-color: #eeeeee;
	}
	
	.pay{
		height: 250rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
		line-height: 30pt;
		border-radius: 10pt;
		background-color: rgba(253,235,235,1);
		color: rgba(212,99,72,1);
		font-size: 12pt;
		text-align: center;
		box-shadow: 0pt 2pt 6pt 0pt rgba(0,0,0,0.4);
		font-family: -regular;
		border: 0pt solid rgba(187,187,187,1);
		.pay-info{
			width: 100%;
			display: flex;
			text-align: center;
			.left{
				line-height: 80rpx;
				width: 60%;
			}
			.right{
				
				width: 40%;
				.button{
					margin-top: 40rpx;
				}
			}
		}
		
		.pay-info-name{
			color: #920000 100%;
			font-size: 30rpx;
		}
		.pay-info-status{
			color: #920000 100%;
			font-size: 60rpx;
			font-weight: bold;
		}
	}

</style>
